{% extends 'mobile_app/base.html' %}
{% load static %}

{% block title %}套餐管理 - 郑州移不动{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">
                <i class="fas fa-mobile-alt text-primary me-2"></i>套餐管理
            </h2>
            <div>
                <span class="badge bg-primary fs-6">
                    <i class="fas fa-phone me-1"></i>{{ phone.number }}
                </span>
            </div>
        </div>
    </div>
</div>

<!-- 当前套餐信息 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-mobile-alt me-2"></i>当前套餐
                </h5>
            </div>
            <div class="card-body">
                {% if current_plan %}
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="text-primary mb-2">{{ current_plan.plan.name }}</h4>
                            <p class="text-muted mb-3">{{ current_plan.plan.description }}</p>
                            <div class="row">
                                <div class="col-3 text-center">
                                    <h6 class="text-success">¥{{ current_plan.plan.monthly_fee }}</h6>
                                    <small class="text-muted">月费</small>
                                </div>
                                <div class="col-3 text-center">
                                    <h6 class="text-info">{{ current_plan.plan.data_allowance }}MB</h6>
                                    <small class="text-muted">流量</small>
                                </div>
                                <div class="col-3 text-center">
                                    <h6 class="text-warning">{{ current_plan.plan.voice_allowance }}分钟</h6>
                                    <small class="text-muted">语音</small>
                                </div>
                                <div class="col-3 text-center">
                                    <h6 class="text-danger">{{ current_plan.plan.sms_allowance }}条</h6>
                                    <small class="text-muted">短信</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-center">
                            <div class="mb-3">
                                <span class="badge bg-success fs-6">已激活</span>
                            </div>
                            <small class="text-muted">
                                开始时间：{{ current_plan.start_date|date:"Y-m-d" }}
                            </small>
                        </div>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-exclamation-triangle text-warning mb-3" style="font-size: 3rem;"></i>
                        <h5 class="text-muted">未选择套餐</h5>
                        <p class="text-muted">请为您的号码选择一个合适的套餐</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 套餐选择 -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>选择套餐
                </h5>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="row g-4">
                        {% for plan in plans %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 border-0 shadow-sm plan-card" 
                                 data-plan-id="{{ plan.id }}"
                                 style="cursor: pointer; transition: all 0.3s ease;">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-primary">{{ plan.name }}</h5>
                                    <p class="text-muted small">{{ plan.description }}</p>
                                    
                                    <div class="mb-3">
                                        <h3 class="text-success fw-bold">¥{{ plan.monthly_fee }}</h3>
                                        <small class="text-muted">/月</small>
                                    </div>
                                    
                                    <div class="row text-center mb-3">
                                        <div class="col-4">
                                            <div class="border-end">
                                                <h6 class="text-info">{{ plan.data_allowance }}MB</h6>
                                                <small class="text-muted">流量</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="border-end">
                                                <h6 class="text-warning">{{ plan.voice_allowance }}分钟</h6>
                                                <small class="text-muted">语音</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <h6 class="text-danger">{{ plan.sms_allowance }}条</h6>
                                            <small class="text-muted">短信</small>
                                        </div>
                                    </div>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="plan" 
                                               value="{{ plan.id }}" id="plan{{ plan.id }}"
                                               {% if current_plan and current_plan.plan.id == plan.id %}checked{% endif %}>
                                        <label class="form-check-label fw-bold" for="plan{{ plan.id }}">
                                            选择此套餐
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-check me-2"></i>确认选择
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 返回按钮 -->
<div class="row mt-4">
    <div class="col-12 text-center">
        <a href="{% url 'mobile_app:phone_management' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>返回号码管理
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 套餐卡片选择效果
    $('.plan-card').on('click', function() {
        var planId = $(this).data('plan-id');
        var radio = $(this).find('input[type="radio"]');
        
        // 取消其他选择
        $('.plan-card').removeClass('border-primary bg-light');
        $('input[type="radio"]').prop('checked', false);
        
        // 选择当前套餐
        $(this).addClass('border-primary bg-light');
        radio.prop('checked', true);
    });
    
    // 初始化已选择的套餐
    $('input[type="radio"]:checked').closest('.plan-card').addClass('border-primary bg-light');
    
    // 表单提交确认
    $('form').on('submit', function(e) {
        var selectedPlan = $('input[name="plan"]:checked');
        if (selectedPlan.length === 0) {
            e.preventDefault();
            alert('请选择一个套餐');
            return false;
        }
        
        var planName = selectedPlan.closest('.plan-card').find('.card-title').text();
        if (!confirm('确定要选择 "' + planName + '" 套餐吗？')) {
            e.preventDefault();
            return false;
        }
    });
    
    // 套餐卡片悬停效果
    $('.plan-card').on('mouseenter', function() {
        if (!$(this).hasClass('border-primary')) {
            $(this).addClass('border-secondary');
        }
    }).on('mouseleave', function() {
        $(this).removeClass('border-secondary');
    });
});
</script>

<style>
.plan-card {
    border: 2px solid transparent;
}

.plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.plan-card.border-primary {
    border-color: var(--primary-color) !important;
    background-color: rgba(0, 123, 255, 0.05) !important;
}
</style>
{% endblock %}
